<template>
  <div class="carbig">
    <div class="carbigone">
      <img
        class="imgone"
        src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png"
        alt=""
      />
      <div class="cartitle">严选好物 用心生活</div>
      <img
        class="imgtwo"
        src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView"
        alt=""
      />
    </div>

    <!-- 轮播图 -->
    <div class="carouse">
      <div class="carouseSwiper">
        <!-- 轮播图结构 -->
        <div class="bigSwiper">
          <!-- 轮播图4/1 -->
          <van-swipe
            v-if="carouseList.length"
            :loop="false"
            class="my-swipe"
            :width="89"
            :show-indicators="false"
            @change="swiperChanged"
          >
            <van-swipe-item v-for="(item, index) in 7" :key="index">
              <div>
                <a :href="carouseList[item - 1].columnUrl">
                  <img :src="carouseList[item - 1].picUrl" alt="" />
                  <p>{{ carouseList[item - 1].mainTitle }}</p>
                  <p>{{ carouseList[item - 1].viceTitle }}</p>
                </a>
              </div>
              <div>
                <a :href="carouseList[item + 6].columnUrl">
                  <img :src="carouseList[item + 6].picUrl" alt="" />
                  <p>{{ carouseList[item + 6].mainTitle }}</p>
                  <p>{{ carouseList[item + 6].viceTitle }}</p>
                </a>
              </div>
            </van-swipe-item>
          </van-swipe>
          <!-- 小圆点 -->
          <div class="smallDian">
            <span
              :class="index === activeIndex ? 'spa' : ''"
              v-for="(item, index) in 4"
              :key="index"
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// ====================

import { carouselApi } from '@/api/zhideCarouse'
import type { NavList } from '@/types/carousel'
import { onMounted, ref } from 'vue'

const carouseList: any = ref<NavList[]>([])
//小圆点存储
const activeIndex = ref(0)

const getcarouselApi = async () => {
  const res = await carouselApi()
  if (res.code == 200) {
    carouseList.value = res.data.navList
  }
}

onMounted(() => {
  getcarouselApi()
})

//监听小圆点
const swiperChanged = (e: any) => {
  activeIndex.value = e
}
</script>

<script lang="ts">
export default {
  name: 'buyCarousel'
}
</script>

<style lang="less" scoped>
a {
  color: inherit !important;
  text-decoration: none !important;
}

.carbig {
  position: relative;
  padding-top: 1.45rem;
  background: #eee;

  .carbigone {
    position: absolute;
    top: 0;
    z-index: 1;

    .imgone {
      position: absolute;
      width: 1.8rem;
      height: auto;
      top: 0.6rem;
      left: 0.12rem;
    }

    .cartitle {
      font-size: 0.4rem;

      height: 0.44rem;
      position: absolute;
      font-family: PingFangSC-Regular;
      left: 2rem;
      top: 0.9rem;
      color: #fff;
    }

    .imgtwo {
      height: 350px;
      width: 100%;
    }
  }

  // 轮播图·
  .carouse {
    width: 9.1rem;
    background: #fff;
    border-radius: 0.16rem;
    margin: 0 auto;

    .carouseSwiper {
      background: #fff;
      border-radius: 0.16rem;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0.2rem;
      position: relative;
      overflow: hidden;
      list-style: none;
      padding: 0;
      z-index: 1;

      .bigSwiper {
        height: 270px;

        .my-swipe {
          width: 355px;
          text-align: center;

          div {
            width: 72px;

            img {
              width: 57px;
              margin: 8px;
            }

            p {
              text-align: center;
            }

            p:nth-child(2) {
              font-size: 13px;
              font-weight: 600;
            }

            p:nth-child(3) {
              font-size: 8px;
              font-weight: 200;
            }
          }
        }

        //小圆点
        .smallDian {
          // margin-top: 8px;
          height: 10px;
          text-align: center;

          span {
            display: inline-block;
            // display: flex;
            // justify-content: center;
            width: 20px;
            height: 2px;
            margin: 0 !important;
            border-radius: 0;
            opacity: 1;
            padding: 2px;
          }

          .spa {
            background-color: pink;
          }
        }
      }
    }
  }
}
</style>
